<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加商品</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/vue/axios.min.js"></script>
    <script src="../plugins/vue/vue-2.6.10.js"></script>


</head>

<body class="hold-transition skin-red sidebar-mini">


<!-- 正文区域 -->
<section class="content">
    <div id="app">
        <div class="box-body">
            <!--tab页-->
            <div class="nav-tabs-custom">
                <!--tab头-->
                <ul class="nav nav-tabs">

                    <li class="active">
                        <a href="#home" data-toggle="tab">添加商品</a>
                    </li>
                </ul>
                <!--tab头/-->

                <!--tab内容-->
                <div class="tab-content">

                    <!--表单内容-->
                    <div class="tab-pane active" id="home">
                        <div class="row data-type">

                            <div class="col-md-2 title">商品名称</div>
                            <div class="col-md-10 data">
                                <input type="text" class="form-control" v-model="shangpin.sname">
                            </div>

                            <div class="col-md-2 title">价格</div>
                            <div class="col-md-10 data">
                                <input type="text" class="form-control" v-model="shangpin.price">
                            </div>

                            <div class="col-md-2 title">分类</div>
                            <div class="col-md-10 data">
                                <select v-model="shangpin.lei" class="form-control">
                                    <option>请选择商品分类</option>
                                    <option v-for="item in lei" :value="item.leiming" >{{item.leiming}}</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <!--tab内容/-->
                <!--表单内容/-->

            </div>


        </div>
        <div class="btn-toolbar list-toolbar">
            <button class="btn btn-primary" @click="add()"><i class="fa fa-save"></i>添加商品</button>
            <a data-toggle="modal" class="btn btn-danger">返回</a>
        </div>
    </div>
</section>
<!-- 正文区域 /-->
<script>
    var app = new Vue({
        el:"#app",
        data:{

            shangpin:{},
            lei:[]


        },
        methods:{
            add(){
                axios.post("/shangpin/add",this.shangpin).then(res=>{

                    location.href="shangpin_list.html";

                })
            }
        },
        created(){
            axios.post("/lei/findall").then(res=>{
                this.lei = res.data.data;
            })
        }
    });
</script>

</body>

</html>